<style lang="scss" scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    min-height: 200px;
    box-shadow: 0 0 2px #ccc;
    border-radius: 10px;
    background-color: white;
    z-index: 99;
    overflow: hidden;
  }
}
</style>

<template>
  <div>
    <div v-if="token" style="display: flex; align-items: center">
      <el-avatar :size="36" :src="userInfo.avatar" shape="square" style="margin-right: 6px" />
      <el-dropdown split-button type="primary">
        Dropdown List
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>我的信息</el-dropdown-item>
            <el-dropdown-item @click="$router.push({ path: '/product/list' })"
              >我的作品</el-dropdown-item
            >
            <el-dropdown-item @click="$router.push({ path: '/create/product' })"
              >创建作品</el-dropdown-item
            >
            <el-dropdown-item @click="quitLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-button type="primary" round v-else @click="isShowLogin = true">登陆/注册</el-button>

    <div v-if="!token && isShowLogin">
      <div class="login">
        <div class="content">
          <Login></Login>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserHooks } from '@/stores/user'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import Login from '@/components/login/indexVuew.vue'
const router = useRouter()
const userInfo = computed(() => useUserHooks().userInfo)
const token = computed(() => useUserHooks().token)
const isShowLogin = ref(false)
const quitLogin = () => {
  useUserHooks().QuitLogin()
  router.push('/login')
}
</script>

<script lang="ts">
export default {
  name: 'my-user'
}
</script>
